<script setup lang="ts">
import { ref } from 'vue'
import Label from '@/components/common/Label.vue';
import SmallSearch from '@/components/common/smallSearch.vue'
import Subset from '@/components/subset/subset.vue'
import Gallery from '@/components/gallery/Gallery.vue'
import SearchKeywords from '@/components/common/searchKeywords.vue'
// 获取文章数据和列表
const subsetId = ref<number | string>(-1);
const changeSubsetId = (id: number | string) => {
  subsetId.value = id;
}

// 搜索内容
const searchTerm = ref<string>('');
const getSearchTerm = (term: string) => {
  searchTerm.value = term;
}

</script>

<template>
  <div class="flex flex-col justify-center items-center">
<!-- 头部 -->
 <SmallSearch  @search="getSearchTerm"/>
 <!-- 标签 -->
 <Label />
 <!-- 分类 -->
<Subset class="my-5 rounded-lg shadow-1" @nowSubsetId="changeSubsetId" :classify="1" />
 <!-- 搜索词提示 -->
  <SearchKeywords :searchTerm="searchTerm" @cancelSearch="getSearchTerm" />
<!-- 内容 -->
<Gallery :page-size="4" :subsetId="subsetId" :searchTerm="searchTerm" />

  </div>
</template>

<style scoped>

</style>
